<layout name='layout_page' />
<script src="<{:STATICS}>/centaurus/js/jquery.maskedinput.min.js"></script> 
<div class="row">
	<div class="col-lg-12">
		<div class="row">
			<div class="col-lg-12">
				<ol class="breadcrumb">
					<li><a href="<{:U('Index/index')}>">Home</a></li>
					<li class="active"><span>User Profile</span></li>
				</ol>
				<h1>Edit My Profile</h1>
			</div>
		</div>

		<div class="row" id="user-profile">
			<div class="main-box">
				<form id="ajaxForm" action="<{:U('Profile/save')}>" method="post" class="form-horizontal form-validata">
				<header class="clearfix tagName">Basic information</header>
				<div class="main-box-body clearfix">	
					<div class="col-lg-2 col-md-3 col-sm-3">
						<img src="<{$user['face']|getFace=###}>" id="face" class="profile-img img-responsive center-block" style="width: 100px; height: 100px;">
						<div class="profile-message-btn center-block text-center">
						<button type="button" class="btn btn-success" onclick="uploadImage('<{:U('Avatar/index')}>','face')">
						<i class="fa fa-file-image-o"></i>
						Change Avatar
						</button>
						</div>
					</div>
					<div class="col-lg-4 col-md-6 col-sm-6">
						<div class="form-group">
							<div class="col-md-12">
							<label>Nickname</label>
							<input type="text" class="form-control" id="nickname" name="nickname" value="<{$user['nickname']}>" data-rule-nickname="true">
							</div>
						</div>
						<div class="form-group">
							<div class="col-md-6">
								<label>Name<span style="color: red; margin: 0 0 0 5px;">*</span></label>
								<input type="text" class="form-control" id="firstname" name="firstname" value="<{$user['firstname']}>" placeholder="First Name" data-rule-required="true">
							</div>
							<div class="col-md-6">
								<label style="padding: 7px 0;"></label>
								<input type="text" class="form-control" id="lastname" name="lastname" value="<{$user['lastname']}>" placeholder="Last Name" data-rule-required="true">
							</div>
						</div>
					</div>
				</div>
				<header class="clearfix tagName">Contact Information</header>
				<div class="main-box-body clearfix">
					<div class="form-group">
						<div class="col-md-6">
							<label for="maskedPhone">Phone<span style="color: red; margin: 0 0 0 5px;">*</span></label>
							<input type="text" class="form-control" name="phone" id="phone" value="<{$user['phone']}>" data-rule-required="true" data-rule-phone="true">
						</div>
						<script type="text/javascript">
						$(function(){
							$("#phone").mask("(999) 999-9999");
						})
						</script>
					</div>
					<div class="form-group">
						<div class="col-md-6">
						<label>Address<span style="color: red; margin: 0 0 0 5px;">*</span></label>
						<input type="text" class="form-control" name="address" id="address" value="<{$user['address']}>" placeholder="Street Adress" data-rule-required="true" data-rule-en="true">
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-6">
						<input type="text" class="form-control" name="address2" id="address2" value="<{$user['address2']}>" placeholder="Apartment,State,Unit etc.(Optional)" data-rule-en="true">
						</div>
					</div>
					<div class="form-group">
						<div class="col-md-2">
							<label>City<span style="color: red; margin: 0 0 0 5px;">*</span></label>
							<input type="text" class="form-control" name="city" id="city" value="<{$user['city']}>" data-rule-required="true">
						</div>
						<div class="col-md-2">
							<label>State<span style="color: red; margin: 0 0 0 5px;">*</span></label>
							<select name="state" id="state" class="form-control" data-rule-required="true">
								<option value="">--select--</option>
								<volist name="state" id="vo">
								<option value="<{$vo.name}>"><{$vo.name}></option>
								</volist>
							</select>
						</div>
						<div class="col-md-2">
							<label for="exampleAutocompleteSimple">Zip Code<span style="color: red; margin: 0 0 0 5px;">*</span></label>
							<input type="text" class="form-control" name="zip" id="zip" value="<{$user['zip']}>" data-rule-required="true" data-rule-number="true" data-rule-rangelength="5,5">
						</div>
					</div>
				</div>
				
				<header class="clearfix tagName">Personal Information</header>
				<div class="main-box-body clearfix">
					<div class="form-group">
						<div class="col-md-3">
							<label>Date of Birth</label>
							<input type="text" class="form-control" id="birthday" name="birthday" value="<{$user['birthday']}>">
							<script> 
							$(function(){
								$("#birthday" ).datepicker({
	                              changeMonth: true,
	                              changeYear: true,
	                              defaultDate:'01/01/1960',
	                              yearRange: "1960:<{$nowYear}>"
	                            });
							});
							</script>
						</div>
						<div class="col-md-3">
							<label>Gender</label>
							<div>
							<div class="radio checkbox-inline">
								<input type="radio" name="gender" id="optionsRadios1" value="male" <eq name="user.gender" value="male">checked="checked"</eq>>
								<label for="optionsRadios1">Male</label>
							</div>
							<div class="radio checkbox-inline">
								<input type="radio" name="gender" id="optionsRadios2" value="female" <eq name="user.gender" value="female">checked="checked"</eq>>
								<label for="optionsRadios2">Female</label>
							</div>
							</div>
						</div>
					</div>
					<div class="form-group">
						<div class="row">
							<div class="col-md-6">			
								<button type="submit" id="myBtn" class="btn btn-success">save</button>
							</div>
						</div>					
									
					</div>	
				</div>
				</form>
			</div>
		</div>		
	</div>
</div>
<!--本页css与js-->
<script>
$(function(){
	$("#state").val('<{$user.state}>');
	/*$(window).bind('beforeunload',function(){
		return 'You have entered the content has not been saved, determined to leave this page?';
	});*/
})
</script>

<script type="text/javascript" src="<{:STATICS}>/js/jquery.form.min.js"></script>
<script type="text/javascript" src="<{:STATICS}>/js/jquery.validate.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

	//ajaxform
	var options = { 
		beforeSubmit:showRequest,//表单验证方式
        success:showResponse  // post-submit callback 
    }; 
    $('#ajaxForm').ajaxForm(options); 

    function showResponse(responseText, statusText)  {
		if (statusText == 'success') {
			var responseText=eval('('+responseText+')');
			if(responseText.state == 'SUCCESS'){
				$(window).unbind('beforeunload');
				_alert2('SUCCESS',responseText.message,responseText.url);
			}else{
				_alert2('ERROR',responseText.state);
				$("#myBtn").removeAttr('disabled').html(btnStr);
			}			
		}else{
			_alert2('ERROR','Lost Service');
			$("#myBtn").button('loading').html('<i class="fa fa-spinner fa-spin"></i> <{:L("_sending")}>');
		}
	} 

	function showRequest(){
		 validata = $("form.form-validata").valid();
		 if (validata){
			$("#myBtn").attr('disabled','disabled').html('<i class="fa fa-spinner fa-spin"></i> <{:L("_sending")}>');
		 }else{
		 	return validata;
		 }
		 
	}
	$.extend($.validator.messages, {
		rangelength: $.validator.format("Invalid zip code"),
	});
	//validation验证
	$("form.form-validata").validate({
		errorElement: "span",
        errorClass: "help-block",     
        errorPlacement: function(error, element) {
        	element.parent().addClass("has-error").append(error);
		},
		success:function(element){
	        element.parent().removeClass("has-error");
	    },
	})
    $.validator.addMethod("nickname",function(value,element){
        var validata=$.ajax({
		        	url:'<{:U("Profile/checknick")}>',
		        	async:false,
		        	data:{nick:value}
		        });
		if(validata['responseText']==1){
			return false;
		}else{
			return true;
		}
    },"Changed nickname already exists");

	$.validator.addMethod("en",function(value,element){
        return this.optional(element) || testEn(value);
    },"Can only contain English and numbers");
});
</script>